{% extends 'base.html' %}
{% load static %}
{% block header %}

    <script src={% static '/js/user.js' %}> </script>
{% endblock %}
{% block content %}
    {% csrf_token %}
{#    <input type="hidden" name="csrfmiddlewaretoken" value="SSm6OhZlgtgLmmLi07RWmPYijzLpebaCh0pFbf57zYddklUSB4EBEks157EvG81b">#}
    <div class="Bott">
			<div class="wrapper clearfix" style="margin: 0 auto">
				<div class="zuo fl" style="margin-left: 100px; height: 367px;">
					<h3>
						<a href="/"><img src="/{{ user.img }}" width="100px" height="100px"></a>
						<p class="clearfix" style="margin-left: 10px"><span class="fl" style="font-size: 15px;">[{{ user.email }}]</span>
                            <span class="fr logout" style="font-size: 15px;"href="/user/logout/">[退出登录]</span>
                        </p>
					</h3>
					<div>
            <ul>
                <li><a href="/user/usercenter/">个人信息</a></li>
            </ul>
            <ul>
				<li><a href="/user/mypassword/">修改密码</a></li>
			</ul>
            <ul>
                <li><a href="/user/myorder/">我的订单</a></li>
            </ul>
            <ul>
                <li><a href="/user/address/">地址管理</a></li>
            </ul>
            <ul>
                <li><a href="/">回到首页</a></li>
            </ul>

					</div>
				</div>
				<div class="you fl" style="height: 502px;">

    <div class="tx clearfix">
						<div class="fl clearfix">
							<a href="/user/center/#" class="fl"><img src="/{{ user.img }}" width="100%" height="100%"></a>
							<p class="fl"><span>{{ user.name }}</span><a href="/user/usersession/">修改个人信息&gt;</a></p>
						</div>
						<div class="fr">绑定邮箱：{{ user.email }}</div>
					</div>
    <div class="bott">
     <form action="/user/mypassword/" method="post" onsubmit="return TJ()">
         {% csrf_token %}
			<div class="line" style="margin-left:-50px;float: left">
				<div class="line_left" style=" width: 400px;float: left;margin-top: -40px">
					<label for="cpassword">密码</label>
				</div>
				<div class="line_right" style="width: 400px;float: left;margin-top: -20px">
					<input type="password" name="opassword" id="opassword" placeholder="输入用户密码"
						 />
                    <p><span id="aSpan" class="error-message" style="color:red;"></span></p>
				</div>
			</div>

			<div class="line" style="float: left;margin-left:-50px;">
				<div class="line_left" style="width: 400px;float: left;margin-top: -90px">
					<label for="spassword">确认密码</label>
				</div>
				<div class="line_right" style="width: 400px;float: left; margin-top: -60px">
					<input type="password" name="spassword" id="spassword" placeholder="输入确认密码"
						/>
                   <p><span id="bSpan" class="error-message" style="color:red;"></span></p>
				</div>
			</div>
         			<div class="line" style="float: left;margin-left:-50px; margin-top: -80px">
				<div class="line_left" style="width: 400px;float: left">
					<label style="font-size: 20px" >邮箱：<label id="email">{{ user.email }}</label></label>
				</div>
			</div>

			<div class="line" style="float: left;margin-left:50px;">
				<div class="line_left" style="width: 400px;float: left;margin-left: -100px; margin-top: -50px">
					<label for="code">验证码</label>
				</div>
				<div class="line_right" style="width: 400px;float: left; margin-top: -25px">
					<input type="text" name="code" id="code" placeholder="输入验证码" style="width: 200px;margin-left: -100px">
                    <p><span id="cSpan" class="error-message" style="color:red; margin-right: 290px;"></span></p>
					<div style="width: 100px; height: 31px; margin-left: 220px;margin-top: -28px">
                        <p style="margin-top: -90px; margin-left: -110px"><a class="yz" href="javascript:;" onclick="EmailCode()">发送验证码</a></p>
                    </div>
                    <p><span id="eSpan" class="error-message" style="color:red;"></span></p>
                    <p style="margin-top: -30px;margin-left: -100px"><button >提交</button></p>
				</div>

			</div>

     </form>

					</div>

				</div>

            </div>
            </div>
{% endblock %}



{% block footer %}
<script>
function TJ(){
        //获取输入框的值
        var opassword = $('#opassword').val();
        var spassword = $('#spassword').val();
        var code = $('#code').val();
        var email = $('#email').text();

        if (opassword.length < 6) {
           $('#aSpan').html('密码不能为空或小于六位');
           return false;
        }
        if (spassword.length < 6) {
           $('#bSpan').html('密码不能为空或小于六位');
           return false;
        }
        if (opassword!==spassword){
            alert("两次输入的密码不一致")

            return false
        }
        if (code.length < 1){
            $('#eSpan').html('请填写验证码');
           return false;
        }
        if (checkEcode(code,email)){
             alert("yanm")
            return false

            }
    }

    function EmailCode() {
             var email = $('#email').text();
            $.ajax({
                url: "/user/email_code/",
                type: "GET",
                data: 'e=' + email,//1503084051@qq.com
                dataType: 'json',
                async: false,
                success: function (response) {
                    if (response.message) {
                        alert('验证码发送成功'); // 显示后端返回的消息

                    }
                },
                error: function (xhr, status, error) {
                    // 处理错误响应
                    alert('删除失败：' + xhr.responseText);
                }
            })

        }
    function checkEcode(code,email) {
            var flag = false
            //返回Ture，表示这个用户名已经存在
            $.ajax({
                url: '/user/checkEcode/',
                type: 'GET',
                async: false, //false表示同步请求，ture表示异步
                data: {
                    "code": code,
                    "email":email,
                },
                success: function (result) {
                    var flag2 = result.flag;
                    if (flag2) {
                        flag = true;
                        $('#cSpan').html('验证码不正确');
                    }
                }

            })
            return flag
        }
</script>
{% endblock %}

